<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc; 
        }
    </style>
</head>

<body>

    <!-- <div></div> -->

    <script>
        // 记录颜色的数组
        var data = [
            "red",
            "green",
            "blue",
            "pink",
            "orange",
            "purple",
            "yellow",
            "gray",
        ]

        // 要求：
            // 定义变量，记录两次输入的值（开始，结束）
            // 根据输入的值，截取data中指定的数据
            // 把截取出来的数据表现在页面上（渲染）

            var start = prompt("请输入第一个值");
            var end = prompt("请输入第二个值");
            console.log(typeof start);
            start = start - 0 ;
            end = end - 0 ;
            console.log(typeof start); 
            var too = data.slice(start , end+1);
            console.log(too);

            var str ="";
            for(i=0 ; i < too.length ; i ++){
                str +="<div style='background-color:"+too[i]+";'></div>";
            }
            document.write(str);
    </script>
</body>

</html>